<template>
  <div class="job-modul">
    <loding :show="Isloding"></loding>
    <!-- <bread :breadList=bList></bread> -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item @click.native="goto('/')">首页</el-breadcrumb-item>
      <template  v-for="(item, key) in bList" :index="key">
        <el-breadcrumb-item @click.native="goto(item.routeName,key)">{{item.text}}</el-breadcrumb-item>
      </template>
    </el-breadcrumb>
    <div class="job-null" v-if="jobList.length==0">
        该部门暂无招聘岗位
    </div>
    <div class="job-items" v-if="jobList.length!=0">
        <div class="job-item" v-for="(item, key) in jobList" :key=key>
            <div class="job-title">
                <div class="job-name" @click="toJobDetail(item)">{{item.positionName}}</div>
                <div class="job-date">{{item.updateDate}}</div>
            </div>
            <div class="job-main">
                <div class="job-price" v-show="item.minPay">
                    {{item.minPay}} - {{item.maxPay}}k 
                </div>
                <div class="job-price" v-show="!item.minPay">
                    面议 
                </div>
                <div class="job-request" v-show="item.workingYears">
                    {{item.workingYears}}/{{item.education}}
                </div>
            </div>
            <div class="job-to-detail">
                <span @click="toJobDetail(item)">查看详情</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import bread from '../breadcrumb'
import loding from '../loding'
import {jobDetail} from '@/api/getData'
export default {
  props: {
    bList: Array
  },
  data () {
      return{
        Isloding: false,  
        jobList: []
      }
  },
  mounted(){
    this.Isloding=true;
    jobDetail.call(this,this.$route.params.id).then(res=>{
        this.jobList = res;
        this.Isloding=false;
    })  
  },
  components: {
    bread,
    loding
  },
  methods: {
    goto(routeName,key) {
      if(key == this.bList.length-1){
        return
      }
      this.$router.replace({ path: routeName })
    },  
    toJobDetail(pra){
        this.$router.push({
          path: "/jobs/deatil",
          query: {
              pageId: JSON.stringify(this.$route.params.id),
              jobData: JSON.stringify(pra)
          }
        })
    }  
  },
  watch: {
    $route(to,from){
        this.Isloding=true;
        jobDetail.call(this,to.params.id).then(res=>{
            this.jobList = res;
            this.Isloding=false;
        })  
    }
    // id(val, oldVal) {
    //     console.log(val, oldVal)
    //     jobDetail.call(val).then(res=>{
    //         this.jobList = res;
    //         this.Isloding=false;
    //     })  
    // }
  }
}
</script>

<style lang="stylus" scoped>
.job-modul{
  width: 1200px;
  padding-top: 20px;
  padding-bottom: 80px;
  margin: 0 auto; 
  border-bottom: 1px solid transparent;
  min-height: 300px;
}
.job-items{
    background:rgba(255,255,255,1);
    .job-item{
        box-sizing: border-box;
        background:rgba(255,255,255,1);
        padding: 40px 30px 0 30px;
        font-size: 0;
        &:hover{
            background:rgba(241,241,241,1);
        }
        >div{
            display: inline-block;
            vertical-align: top;
        }
        .job-title{
            width:440px;
            height:108px;
            border-bottom: 1px solid rgba(238,238,238,1);
            .job-name{
                margin-bottom: 30px;
                font-size:24px;
                line-height: 24px;
                color:rgba(30,30,30,1);
                cursor: pointer;
                &:hover{
                    color:rgba(20,87,253,1);
                }
            }
            .job-date{
                font-size:14px;
                color:rgba(168,168,168,1);
            }
        }
        .job-main{
            width:440px;
            height:108px;
            border-bottom: 1px solid rgba(238,238,238,1);
            .job-price{
                margin-bottom: 30px;
                font-size:24px;
                line-height: 24px;
                color:rgba(255,98,82,1);
            }
            .job-request{
                font-size:14px;
                color:rgba(130,130,130,1);
            }
        }
        .job-to-detail{
            width:260px;
            height:108px;
            position: relative;
            border-bottom: 1px solid rgba(238,238,238,1);
            span{
                cursor: pointer;
                display inline-block;
                position: absolute;
                z-index: 10;
                top: 20px;
                right: 0;
                padding: 9px 16px;
                background:rgba(20,87,253,1);
                font-size:14px;
                line-height:14px;
                color:rgba(255,255,255,1);
            }
        }
    }
}
.job-null{
    font-size:16px;
    color:rgba(130,130,130,1);
    line-height:16px; 
    text-align: center;
    margin-top: 70px;   
}
</style>
